import VXETable from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import { handlePropsMethod } from '../../../utils'
import './index.scss'

const Bem = createBem(`${tableNamespace}__date-time`)

VXETable.renderer.add('DateTime', {
  autofocus: '.el-input__inner',
  renderEdit(h, renderOpts, params) {
    const { options = {} } = renderOpts
    const { row, column, $table } = params
    const _options = handlePropsMethod(options, params, ['disabled'])

    const disabledDate = _options?.pickerOptions?.disabledDate
    if (disabledDate) {
      _options.pickerOptions.disabledDate = t => {
        return disabledDate({ cellValue: t, row, column })
      }
    }
    _options.type = "datetime"
    return [
      <el-date-picker
        class={Bem()}
        v-model={row[column.property]}
        size={this.$store.getters.size}
        type="datetime"
        placeholder="选择日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        props={_options}
        onChange={() => {
          $table.updateStatus(params)
        }}
      />
    ]
  },
  renderCell(h, renderOpts, params) {
    const { formatter } = renderOpts
    const { row, column } = params
    const cellValue = row[column.property]
    const content = formatter
      ? formatter({ cellValue, row, column })
      : cellValue

    return [<span>{content}</span>]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'tooltip',
  align: 'left'
}
